<template>
  <div class="member-table">
    <el-table :data="tableData" style="width: 100%" table-layout="fixed" border>
      <el-table-column prop="name" label="会员卡名称"></el-table-column>
      <el-table-column prop="cardType" label="类型"></el-table-column>
      <el-table-column prop="venues" label="支持场馆"></el-table-column>
      <el-table-column prop="order" label="排序"></el-table-column>
      <el-table-column prop="remark" label="备注"></el-table-column>
      <el-table-column label="操作">
        <template #default="{ row }">
          <router-link
            :to="{ path: '/setVipCardManagement', query: { id: row.id } }"
          >
            <el-button type="text" size="small">编辑</el-button>
          </router-link>
          <el-button type="text" size="small" @click="del(row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
  
  <script lang="ts">
import { defineComponent, onMounted, ref,watchEffect } from "vue";
import userManagementhooks from "../hooks/userManagement";
import pageVipCardStore from "../store/vipCard";
import { RouterLink } from "vue-router";
export default defineComponent({
  name: "MemberTable",
  props: {
    selected: {
      type: String,
      default: "",
    },
    searchText: {
      type: String,
      default: "",
    },
  },
  data() {
    return {};
  },
  setup() {
    const pages = pageVipCardStore();
    const tableData = ref([]);
    const pageVipCard = (): void => {
      let limit = ref<number>(100).value;
      let page = ref<number>(1).value;
      let cardType = ref<number>().value;
      let name = "";
      userManagementhooks.page_vipCard(cardType, limit, name, page);
    };
    const del = (id) => {};
    onMounted(() => {
      // 页面加载完成后执行的函数
      // console.log(12313);
      pageVipCard();
      // console.log(store.setPageVipCardList);
    });
    watchEffect(() => {
      tableData.value = pages.getPageVipCard;
    });
    return {
      pageVipCard,
      tableData,
      del,
    };
  },
  computed: {
    filteredData() {
      if (!this.selected && !this.searchText) {
        return this.tableData;
      }
      return this.tableData.filter((item) => {
        if (this.selected && item.status !== this.selected) {
          return false;
        }
        if (
          this.searchText &&
          !item.cardNumber.includes(this.searchText) &&
          !item.member.includes(this.searchText) &&
          !item.phone.includes(this.searchText)
        ) {
          return false;
        }
        return true;
      });
    },
  },
  components: {
    RouterLink, // 注册 RouterLink 组件
  },
});
</script>
  
  <style scoped>
.member-table {
  width: 100%;
}
</style>
  